<template>
    <div class="treeWrap">
        <a-form-item :label="item.label">
            <a-tree :checkedKeys="checkedKeys" :replaceFields="replaceFields" checkable :selected-keys="treeValue"
                :tree-data="item.data" @select="onSelect" @check="onCheck" />
            <a-row>
                <a-col :span="0">
                    <a-input
                        v-decorator="[item.dataIndex, { rules: [{ required: item.required, message: getMessage(item) }] }]" />
                </a-col>
            </a-row>
        </a-form-item>

    </div>
</template>
<script>
import { getMessage } from './js/js';

export default {
    name: 'FormTree',
    props: {
        item: {
            type: Object,
            default: () => { }
        },
        formVal: {
            type: Object,
            default: () => { }
        },
        formData: {
            type: [Array, Object],
            default: () => []
        },
        form: {
            type: [Array, Object, String],
        }
    },
    data() {
        return {
            checkedKeys: [],
            replaceFields: { children: 'child', title: 'name', key: 'id' },
        }
    },
    computed: {
        treeValue() {
            return this.formVal[this.item.dataIndex].split(',')
        },
    },
    methods: {
        getMessage,
        onSelect(selectedKeys, info) {
        },
        onCheck(arr, e) {
            this.checkedKeys = arr;
            let newFormVal = { [this.item.dataIndex]: this.checkedKeys.join(',') }
            this.form.setFieldsValue(newFormVal)
        }
    },
    mounted() {
        this.checkedKeys = this.formVal[this.item.dataIndex].split(',');
    }
}
</script>
<style lang="less" scoped>
.treeWrap {}
</style>